:root {
  --color-orange-700: #FF6200;
  --color-orange-600: #FF7700;
  --color-orange-500: #FD9133;
  --color-orange-300: #FDAD66;
  --color-orange-100: #FFE1C6;
  --color-orange-50: #FFF0E3;

  --color-black: #000000;
  --color-white: #FFF;

  --color-grey-600: #282828;
  --color-grey-500: #535353;
  --color-grey-200: #D9D9D9;
  --color-grey-100: #F2F2F2;


  --color-status-success: #3A8F75;
  --color-status-error: #ED2B3B;
  --color-status-succcess-light: #E7F4E8;
  --color-status-error-light: #FFE2E5;

}

.text-orange-700 {
  color: var(--color-orange-700) !important;
}

.text-orange-600 {
  color: var(--color-orange-600) !important;
}

.text-orange-500 {
  color: var(--color-orange-500) !important;
}

.text-orange-300 {
  color: var(--color-orange-300) !important;
}

.text-orange-100 {
  color: var(--color-orange-100) !important;
}

.text-orange-50 {
  color: var(--color-orange-50) !important;
}

.text-black {
  color: var(--color-black) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-grey-600 {
  color: var(--color-grey-600) !important;
}

.text-grey-500 {
  color: var(--color-grey-500) !important;
}

.text-grey-200 {
  color: var(--color-grey-200) !important;
}

.text-grey-100 {
  color: var(--color-grey-100) !important;
}

.text-status-success {
  color: var(--color-status-success) !important;
}

.text-status-error {
  color: var(--color-status-error) !important;
}

.text-status-success-light {
  color: var(--color-status-succcess-light) !important;
}

.text-status-error-light {
  color: var(--color-status-error-light) !important;
}
.background-white,
.background-grey-100,
.background-grey-100-to-white,
.background-white-to-grey-100 {
  position: relative;
  z-index: 0;           
  background: none;     
}

.background-white::before,
.background-grey-100::before,
.background-grey-100-to-white::before,
.background-white-to-grey-100::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;           
  pointer-events: none;  
}

.background-white::before {
  background: var(--color-white);
}

.background-grey-100::before {
  background: var(--color-grey-100);
}

.background-grey-100-to-white::before {
  background: linear-gradient(180deg, var(--color-grey-100) 0%, var(--color-white) 100%);
}

.background-white-to-grey-100::before {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-grey-100) 100%);
}